<template>
  <div class="wrap">
    <!-- 返回按钮 -->
      <div class="backYest" @click="backYest">
          <img src="navtopIcon/back.png">
      </div>
    <ul class="uu">
      <li v-for="(item,index) in twolist" :key="index" @click="goList(item.id)">
        <img :src="item.pic" alt style="width:100%;height:100px" />
        <p>{{item.name}}</p>
      </li>
    </ul>
    <!-- 空状态-->
    <van-empty description="亲暂时没有数据"  v-show="twolist.length==0"/>
  </div>
</template>

<script>
import PATH from "../../router/constant";
import NavigationBar from "../../components/headerNav/NavigationBar";
export default {
  components:{
      NavigationBar
  },
  data() {
    return {
      twolist: [],
      isshow: false,
    };
  },

  mounted() {
    var id = this.$route.query.id
    this.$CLIENT.getList().then(res=>{
         res.data.data.map(item=>{
            if(item.categoryId == id){
                this.twolist.push(item)
            }
        })
    })
  },
  methods: {
    backYest() {
      this.$router.goBack();
    },
    goList(id){
        this.$router.goNext({path:PATH.PAPULARBAR,query:{id}})
    }
  },
};
</script>

<style scoped>
.backYest
{
    position: fixed;
    top: 10px;
    left: 5px;
    z-index: 99 !important;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,.5);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.backYest img
{
  width: 60%;
  height: 60%;
}

.top {
  top: 0px;
  width: 100%;
  height: 15px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;
}
.wrap {
  width: 100%;
  height: 100vh;
  background: white;
}
.top span {
  font-size: 14px;
}
body {
  width: 100%;
  height: 100%;
  background: white;
}
.uu {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.uu li {
  height: 170px;
  width: 48%;
  background: #f0edd4;
  margin: 0 3px;
  /* color: #81715a; */
}
</style>